---
import { Image } from 'astro:assets'
import Logo from '../../assets/logo.svg'
import Hamburger from './Hamburger.astro'
import { links } from './data'
---

<nav>
    <div class="logo-wrapper">
        <Image class="logo" src={Logo} alt="" />
        react-native-unistyles
    </div>
    <ul>
        {links.map((link) => (
            <li>
                <a
                    href={link.href}
                    target={link.href.startsWith('http') ? '_blank' : '_self'}
                >
                    {link.name}
                </a>
            </li>
        ))}
    </ul>
    <Hamburger />
</nav>

<style>
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        font-size: clamp(16px, 2vw, 24px);
        background: linear-gradient(
            to bottom,
            rgba(22, 10, 97, 0.38),
            ease-in-out,
            transparent
        );
        z-index: 50;

        @media (min-width: 700px) {
            padding: 48px;
        }
    }

    .logo {
        width: 60px;
        height: 60px;
        transform: translateY(-20%);
        font-weight: 700;
        position: relative;
        z-index: 100;
    }

    .logo-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    ul {
        display: none;

        @media (min-width: 700px) {
            display: flex;
            list-style: none;
            height: 36px;
        }
    }

    li {
        padding: 0 32px;
        font-weight: 500;
        border-right: 1px solid var(--white);
        display: flex;
        align-items: center;
    }

    li:last-child {
        border-right: none;
    }
</style>
